<template>
    <div class="goods-cate">
        <div class="goods-cate-title">
            <div class="title-name">{{ data.name }}</div>
            <div class="title-desc">{{ data.front_name }}</div>
        </div>
        <div class="goods-cate-content">
            <Cateitem  v-for="item in godslist" :key="item.id" :itemdata="item"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import Cateitem from './Cateitem.vue';
defineProps<{
    data: CateNs.IcategoryList
    godslist: CateNs.IcategoodsList[]
}>()
</script>

<style scoped lang="scss">
.goods-cate {
    width: 100%;
    // height: 1000px;
    overflow: hidden;
    margin-top: 6px;

    box-sizing: border-box;

    .goods-cate-title {
        height: 0.73rem;
        width: 3.54rem;
        margin: 13px auto;
        background: #f9f4e5;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .title-name{
            font-size: 16px;
            color: #000;
        }
        .title-desc{
            margin-top: 2px;
            font-size: 14px;
            color: #666666;
        }
    }

    .goods-cate-content {
        margin: 0 auto;
        width: 3.56rem;
        // height: 1000px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

    } 
}</style>